import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'
//新增收获地址页面
import { AtIcon, AtFloatLayout, AtSteps } from 'taro-ui'
export default class Index extends Component {

  config = {
    navigationBarTitleText: '订单详情',
    navigationBarBackgroundColor: '#6381F7',
    // navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'white'
  }

  constructor(props) {
    super(props)
    this.state = {
      isOpened: false,
      current:0
    }

  }
  onChange (current) {
    this.setState({
      current
    })
  }


  componentWillMount() { }

  componentDidMount() { }


  onesaluate = () => {
    Taro.navigateTo({
      url: '../index.6/index'
    })
  }

  onorder = () => {
    this.setState({
      isOpened: true
    })
  }

  onhandleClose = () => {
    this.setState({
      isOpened: false
    })
  }


  render() {
    const items = [
      { 'title': '订单已提交', 'desc': '2018年12月29日 11:23' },
      { 'title': '商家已确认', 'desc': '2018年12月29日 11:23' },
      { 'title': '配送员送达', 'desc': '2018年12月29日 11:23' },
      { 'title': '订单已完成', 'desc': '2018年12月29日 11:23' }
    ]


    return (
      <View className='index'>
        <AtFloatLayout isOpened={this.state.isOpened} onClose={this.onhandleClose}>
          <AtSteps
            items={items}
            current={this.state.current}
            // onChange={this.onChange.bind(this)}
          />
        </AtFloatLayout>
        <View className='index_top' onClick={this.onorder}>
          <View><Text>订单进行中</Text></View>
          <View ><AtIcon value='chevron-right' size='20' color="#ccc"></AtIcon></View>
        </View>

        <View className='index_model'>
          <View className='model_top'>
            <View><Text>#1燃气站</Text></View>
            <View ><AtIcon value='chevron-right' size='20' color="#ccc"></AtIcon></View>
          </View>
          <View className='line'></View>
          <View className='model_bottom'>
            <View className='bottom_L'>
              <Image
                className='Image'
                src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1759133402,2696021330&fm=26&gp=0.jpg'
              />
            </View>
            <View className='bottom_R'>
              <View>
                <Text>11.6kg燃气</Text><Text style={{ float: "right" }}>¥ 50</Text>
              </View>
              <View>
                <Text style={{ fontSize: '14px', color: "#ccc" }}>X 1</Text>
              </View>

            </View>
          </View>
          <View className='model_bottom'>
            <View className='bottom_L'>
              <Image
                className='Image'
                src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1759133402,2696021330&fm=26&gp=0.jpg'
              />
            </View>
            <View className='bottom_R'>
              <View>
                <Text>11.6kg燃气</Text><Text style={{ float: "right" }}>¥ 50</Text>
              </View>
              <View>
                <Text style={{ fontSize: '14px', color: "#ccc" }}>X 1</Text>
              </View>

            </View>
          </View>
        </View>

        <View className='index_top1' onClick={this.onesaluate}>
          <View><Text>我的评价</Text></View>
          <View ><AtIcon value='chevron-right' size='20' color="#ccc"></AtIcon></View>
        </View>

        <View className='index_footer'>
          <View className='footer_top'>
            <Text>订单信息</Text>
          </View>

          <View className='line'></View>

          <View className='footer_f'>
            <View className='item'>
              <Text style={{ color: '#ccc' }}>订单号码</Text><Text>5056 6980 5925 29817</Text>
            </View>
            <View className='item'>
              <Text style={{ color: '#ccc' }}>支付方式</Text><Text>在线支付</Text>
            </View>
            <View className='item'>
              <Text style={{ color: '#ccc' }}>下单时间</Text><Text>2018-12-18 17:11:15</Text>
            </View>
            <View className='item'>
              <Text style={{ color: '#ccc' }}>收货信息</Text><Text>XXXXXXXXXXXXXXXXX</Text>
            </View>

          </View>

        </View>






      </View>
    )
  }
}

